<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端登录页面</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="../sgin.js"></script>
</head>
<body>
<div id="app">
    <h1 >手机端登录页面</h1>
    <div v-if="myinfo">欢迎{{myinfo.name}}</div>
    <form v-else style="text-align: center">
        账号：<input type="text" v-model="user.username"><br>
        密码：<input type="password" v-model="user.password"><br>
        <button @click.prevent="login">登录</button>
    </form>
</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            user:{
                username:"",
                password:""
            },
            myinfo:null
        },
        methods:{
            login(){
                var p = new URLSearchParams();
                p.append("username",this.user.username);
                p.append("password",this.user.password);
                axios.post("/sgin/login",p).then(res=>{
                    if(res.data.code==1){
                        axios.get("/sgin/myinfo").then(resp=>{
                            this.myinfo =resp.data.data;
                            localStorage.setItem("cinema-username",this.user.username);
                            localStorage.setItem("cinema-password",this.user.password);
                        });
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        },
        created(){
            if(localStorage.getItem("cinema-username")){
                this.user.username = localStorage.getItem("cinema-username");
                this.user.password = localStorage.getItem("cinema-password");
                this.login();
            }
        }
    });
</script>
</body>
<style>
    *{
        font-size: 1.5rem;
    }
    #app{
        width: 70vw;
        margin:10vh auto;
        line-height: 2rem;
    }
</style>
</html>